<template>
	<view class="Statistics">
		<canvas :canvas-id="code" :id="code" class="charts" @touchend="tap" />
	</view>
</template>

<script>
	import uCharts from '@qiun/ucharts';
	var uChartsInstance = {};
	export default {
		data() {
			return {
				code: 'nMrfNUCzKFBelcXicnObcFYIdGLxVPLO',
				cWidth: 750,
				cHeight: 500
			};
		},
		onReady() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(654);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(320);
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2023"],
						series: [{
								name: "商品总收益",
								data: [35, 36, 31, 33, 13, 34, 10]
							},
							{
								name: "订单总数量",
								data: [18, 27, 21, 24, 6, 28, 10]
							},
							{
								name: "小区总流量",
								data: [18, 27, 21, 24, 6, 28, 10]
							}
						]
					};
					this.drawCharts(this.code, res);
				}, 500);
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "column",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					animation: true,
					background: "#FFFFFF",
					color: ["#EB0000", "#FDE170", "#94D2FF"],
					padding: [0, 0, 0, 0],
					enableScroll: false,
					fontSize: 12,
					fontColor: '#4E5969',
					legend: {
						show: true
					},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						// data: [{
						// 	min: -40,
						// 	max: 10
						// }],
						disabled: true,
						disableGrid: true,
						// data: [{ min: 0 }]
					},
					extra: {
						column: {
							type: "group",
							width: 10,
							linearType: "custom",
							barBorderCircle: true,
							customColor: ["#EB0000", "#FDE170", "#94D2FF"]
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		}
	};
</script>

<style>
	.Statistics {
	}
</style>